<template>
  <div style="margin:0 auto; width:600px; height:100px; " >

    <el-form :model="form" ref="form"  :rules="rules" class="form-container"   >

      <div class="createPost-main-container">
        <p class="warn-content">
          修改密码
        </p>
        <el-form-item label="原密码：" :label-width="formLabelWidth" prop="oldpassword">
          <el-input v-model="form.oldpassword" auto-complete="off" ></el-input>
        </el-form-item>
        <el-form-item label="新密码：" :label-width="formLabelWidth" prop="newpassword">
          <el-input v-model="form.newpassword" auto-complete="off" ></el-input>
        </el-form-item>
        <el-form-item label="确认新密码：" :label-width="formLabelWidth" prop="qrpassword">
          <el-input v-model="form.qrpassword" auto-complete="off" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm('form')" style="float:right;margin-right:20px;">重置</el-button>

          <el-button type="primary"  @click.native="submitForm" :loading="addLoading" style="float:right;margin-right:10px;">确 定</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
  import util from '@/common/js/util'
  import store from '@/store/index'
  import md5 from 'js-md5';
  import { validateURL } from '@/utils/validate'
  import { Message, MessageBox } from 'element-ui'
  import { editUser ,changePassword,getUserinfo} from '@/api/user'

  export default {
    name: "changePassword",
    data() {
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.form.newpassword) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {

        listLoading: true,
        loading: false,
        addLoading: false,
        form: {
          id:'',
          password:'',
          oldpassword: '',
          newpassword: ''
        },
        rules: {
          oldpassword: [
            { required: true, message: '请输入旧密码', trigger: 'blur' },
            { pattern: /^([a-z0-9]){5,10}$/i, message: '密码为数字、小写字母、大写字母、特殊符号，长度为 5 - 10' }

          ],
          newpassword: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
            { pattern:  /^([a-z0-9]){5,10}$/i, message: '密码为数字、小写字母、大写字母、特殊符号，长度为 5 - 10' }

          ],
          qrpassword: [
            { required: true, validator: validatePass2, trigger: 'blur' }
          ]
        },
        formLabelWidth: '120px'

      }
    },
    created() {
      var param = this.$route.query;
      // var param = this.$route.params;
      console.log('user',store.state.user.id);
      this.form.id = store.state.user.id;
      this.form.password = store.state.user.password;
      console.log("form.id",this.form.id);
      console.log("form.password",this.form.password);
      if(JSON.stringify(param)!=='{}'){
        console.log('查询详情');
      }

      this.fetchData()
    },

    methods: {
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
  /*    getDetail(){
        const params = {id:this.form.id}
        this.listLoading = true
        findStrategyById(params).then(response => {
          if (response.data.reason === null) {
            this.form = Object.assign({}, response.data.result.StrategyOne);
            console.log('form',this.form);
            this.listLoading = false
          } else {
            // this.loading = false
            this.$message({
              message: response.data.reason.text,
              type: 'error'
            })
          }
        })
      },*/
      //
      fetchData() {
        this.listLoading = true
        getUserinfo().then(response => {
          if (response.data.error === null) {
            this.form = Object.assign({}, response.data.data.user);
            console.log('form',this.form);
            this.listLoading = false
          } else {
            // this.loading = false
            this.$message({
              message: response.data.reason.text,
              type: 'error'
            })
          }
        })

      },
      logout() {
        this.$store.dispatch('LogOut').then(() => {
          location.reload() // 为了重新实例化vue-router对象 避免bug
        })
      },
      // 修改密码
      submitForm: function() {
        let self = this;
      //  console.log('formid',self.form.id);
       // console.log('password',self.form.password);
       //  if(self.form.password===md5(self.form.oldpassword)) {
          this.$refs.form.validate((valid) => {
            if (valid) {
              this.$confirm('确认修改吗？', '提示', {}).then(() => {
                this.addLoading = true
                console.log(this.form);
                const para = Object.assign({}, this.form)
               // console.log('para', para);
                let id = this.form.id;
                if (id !== undefined && id !== null && id !== '') {//更新
                  changePassword(para).then((res) => {
                    this.addLoading = false
                    if( res.data.error!==null){
                      this.$message({
                        message: res.data.error.text,
                        type: 'error'
                      })
                    } else {
                      MessageBox.confirm(
                        '修改密码成功，请重新登录！',
                        '确定登出',
                        {
                          confirmButtonText: '重新登录',
                          type: 'success'
                        }
                      ).then(() => {
                        store.dispatch('FedLogOut').then(() => {
                          location.reload() // 为了重新实例化vue-router对象 避免bug
                        })
                      })
                    }
                  }).catch(function (error) {
                    // 处理 getJSON 和 前一个回调函数运行时发生的错误
                    self.addLoading = false;
                    // console.log('发生错误！', error);
                    // self.$message({
                    //   message: '发生错误：'+error,
                    //   type: 'error'
                    // })

                  })
                } else {
                  console.log("用户id是空")
                  store.dispatch('FedLogOut').then(() => {
                    location.reload() // 为了重新实例化vue-router对象 避免bug
                  })
                }
              })
            }
          })
        // }else {
        //   this.$message({
        //     message: '旧密码不正确',
        //     type: 'warning'
        //   })
        // }
      },

    }
  }
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
  @import "~@/styles/mixin.scss";
  .createPost-container {
    position: relative;
    .createPost-main-container {
      padding: 40px 45px 20px 50px;
      .postInfo-container {
        position: relative;
        @include clearfix;
        margin-bottom: 10px;
        .postInfo-container-item {
          float: left;
        }
      }
      .editor-container {
        min-height: 500px;
        margin: 0 0 30px;
        .editor-upload-btn-container {
          text-align: right;
          margin-right: 10px;
          .editor-upload-btn {
            display: inline-block;
          }
        }
      }
    }
    .word-counter {
      width: 40px;
      position: absolute;
      right: -10px;
      top: 0px;
    }
  }

  .sub-navbar {
    height: 50px;
    line-height: 50px;
    position: relative;
    width: 100%;
    text-align: right;
    padding-right: 20px;
    transition: 600ms ease position;
    background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
    .subtitle {
      font-size: 20px;
      color: #fff;
    }
    &.draft {
      background: #d0d0d0;
    }
    &.deleted {
      background: #d0d0d0;
    }
  }

</style>


